<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <img src="../../public/img/1.jpg" alt="" />
        <h1>美味隆江猪脚饭</h1>
        <img src="../../public/img/2.jpg" alt="" />
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu router :default-active="$route.path">
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Bowl /></el-icon>
                <span>分店管理</span>
              </template>
              <el-menu-item index="/home/branch-list">
                <el-icon><Grid /></el-icon>
                <span>分店列表</span>
              </el-menu-item>
              <el-menu-item index="/home/branch-add">
                <el-icon><Plus /></el-icon>
                <span>增加分店</span>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Dish /></el-icon>
                <span>菜品管理</span>
              </template>
              <el-menu-item index="/home/dish-list">
                <el-icon><Grid /></el-icon>
                <span>菜品列表</span>
              </el-menu-item>
              <el-menu-item index="/home/dish-add">
                <el-icon><Plus /></el-icon>
                <span>增加菜品</span>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><UserFilled /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/home/user-list">
                <el-icon><Grid /></el-icon>
                <span>用户列表</span>
              </el-menu-item>
              <el-menu-item index="/home/user-add">
                <el-icon><Plus /></el-icon>
                <span>增加用户</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, i) in $route.meta.nav" :key="i">{{
              item
            }}</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider content-position="left">{{
            $route.meta.divider
          }}</el-divider>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
//import { defineComponent } from "vue";
//import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default {};
</script>

<style lang="scss" scoped>
.el-header {
  display: flex;
  background-color: pink;
  height: 100px;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  > img {
    width: 100px;
  }
  > h1 {
    font-size: 55px;
    font-weight: bold;
    color: #409eff;
  }
}
</style>
